var renderer;
function initThree() {
  width = document.getElementById('canvas-frame').clientWidth;
  height = document.getElementById('canvas-frame').clientHeight;
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  document.getElementById('canvas-frame').appendChild(renderer.domElement);
  renderer.setClearColor(0xFFFFFF, 1.0);
}

var camera;
var cameraParam;
function initCamera() {
  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera.position.x = cameraParam.x;
  camera.position.y = cameraParam.y;
  camera.position.z = cameraParam.z;
  camera.up.x = cameraParam.up.x;
  camera.up.y = cameraParam.up.y;
  camera.up.z = cameraParam.up.z;
  camera.lookAt({
    x: 0,
    y: 0,
    z: 0
  });
}

var scene;
function initScene() {
  scene = new THREE.Scene();
}

var light;
function initLight() {
  light = new THREE.AmbientLight(0x000000);
}

var cube;
var texture;
function initObject() {
  var geometry = new THREE.Geometry();
  var v1 = new THREE.Vector3(-100,0,0);
  var v2 = new THREE.Vector3(100,0,0);
  var v3 = new THREE.Vector3(0,100,0);
  var meterial = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors ,wireframe:false})
  geometry.vertices.push(v1);
  geometry.vertices.push(v2);
  geometry.vertices.push(v3);
  
  var c1 = new THREE.Color(0xff0000);
  var c2 = new THREE.Color(0x00ff00);
  var c3 = new THREE.Color(0x0000ff);
  var c4 = new THREE.Color(0x0080f0);
  var c5 = new THREE.Color(0xf080f0);
  var obj = new THREE.Mesh(geometry, meterial);
  var face =new THREE.Face3(2,0,1)
  face.vertexColors[0] = c1;
  face.vertexColors[1] = c2;
  face.vertexColors[2] = c3;
  geometry.faces.push(face)

  
  console.log("geometry",geometry)
  scene.add(obj);
}

function initTexture() {
}

var gui
function createUI() {
  var lightObj = function () {
    this.x = 0;
    this.y = 0;
    this.z = 0;
    this.decay = 1;
  };

  var cameraObj = function () {
    this.up = {};
    this.x = 0;
    this.y = 0;
    this.z = 500;
    this.up.x = 0;
    this.up.y = 1;
    this.up.z = 0;
  }


  var gui = new DAT.GUI();
  cameraParam = new cameraObj();
  gui.add(cameraParam, "x", -2000, 2000).name("相机X的位置");
  gui.add(cameraParam, "y", -2000, 2000).name("相机Y的位置");
  gui.add(cameraParam, "z", -2000, 2000).name("相机Z的位置");
  gui.add(cameraParam.up, "x", -1, 1).name("相机up.x的位置");
  gui.add(cameraParam.up, "y", -1, 1).name("相机up.y的位置");
  gui.add(cameraParam.up, "z", -1, 1).name("相机up.z的位置");

  lightParam = new lightObj();
  gui.add(lightParam, "x", -2000, 2000).name("点光源X的位置");
  gui.add(lightParam, "y", -2000, 2000).name("点光源Y的位置");
  gui.add(lightParam, "z", -2000, 2000).name("点光源Z的位置");
  gui.add(lightParam, "decay", 0, 1).name("衰减");

}

function change() {
  if (texture != null) {
    texture.offset.x = textureParam.offsetX;
    texture.offset.y = textureParam.offsetY;
    texture.repeat.x = texture.repeat.y = textureParam.repeat;
    if (textureParam.wrap == 1) {
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    } else if (textureParam.wrap == 2) {
      texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
    } else if (textureParam.wrap == 3) {
      texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
    }
    texture.needsUpdate = true;
  }

  light.position.set(lightParam.x, lightParam.y, lightParam.z);
  light.decay = lightParam.decay;

  camera.position.x = cameraParam.x;
  camera.position.y = cameraParam.y;
  camera.position.z = cameraParam.z;
  // camera.up.x = cameraParam.up.x;
  // camera.up.y = cameraParam.up.y;
  // camera.up.z = cameraParam.up.z;
  camera.up.set(cameraParam.up.x,cameraParam.up.y,cameraParam.up.z)
  camera.updateProjectionMatrix();
}

function animation() {
  change();
  renderer.clear();
  renderer.render(scene, camera);
  requestAnimationFrame(animation);
}

function threeStart() {
  createUI();
  initTexture();
  initThree();
  initCamera();
  initScene();
  initLight();
  initObject();
  animation();
}